<template>
  <div>
    <div class="imgSrc"><img :src="details.imgSrc"></div>
    <div class="box">
      <div class="top">
        <div class="avatar"><img :src="details.avatar"></div>
        <div class="zuozhe">
          <span>{{ details.author }}</span>
          <span>发表于</span>
          <span>{{ details.dateTime }}</span>
        </div>
      </div>
      <div class="title">{{ details.title }}</div>
      <div class="line"></div>
      <div class="position">
        <div><img @click="handleChange(details.collected)" :src="details.collected?collection:collection_anti" /></div>
        <div><img src="../../assets/images/icon/share-anti.png" /></div>
      </div>
      <div>
        <div class="yingyan">1 引言</div>
        <div class="detail">{{ details.detail }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getArticle } from "../../model/index";
import collection from '../../assets/images/icon/collection.png'
import collection_anti from '../../assets/images/icon/collection-anti.png'
import share from '../../assets/images/icon/share.png'
import share_anti from '../../assets/images/icon/share-anti.png'
export default {
  data() {
    return {
      details: [],
      collection_anti,collection,
      share,share_anti,
      collected:""

    };
  },
  mounted() {
    var id = this.$route.params.id;
    // console.log(this)
    // console.log(id)
    var detailUrl = `/api/articleDetail?id=${id}`;
    getArticle(detailUrl).then((res) => {
      this.details = res.data.res[0];
    });
  },
  methods: {
    handleChange(collected){
      this.details.collected = !this.details.collected
      this.collected = this.details.collected
      console.log(collected)

    }
  },
};
</script>

<style scoped>
.imgSrc img {
  width: 100%;
  height: 250px;
}
.zuozhe {
  font-size: 15px;
  color: #818181;
  line-height: 50px;
  padding-left: 10px;
}
.zuozhe>span:nth-child(1) {
  font-size: 18px;
}
.zuozhe>span {
  padding-left: 10px;
}
.top {
  display: flex;
  padding: 10px 0px;
}
.avatar img {
  width: 50px;
  height: 50px;
}
.title {
  font-size: 18px;
  font-weight: 700;
}
.box {
  padding-left: 5%;
  padding-right: 5%;
  position: relative;
}
.line {
  border-bottom: 1px solid #c1c1c1;
  margin: 35px 0px;
}
.position img {
  width: 40px;
  height: 40px;
}
.position {
  display: flex;
  position: absolute;
  top: 138px;
  right: 35px;
}
.position>div:nth-child(2) {
  padding-left: 10px;
}
.yingyan {
  font-size: 15px;
  color: #898989;
  padding-bottom: 25px;
}
.detail {
  font-size: 15px;
  color: #898989;
  line-height: 1.5em;
}

</style>
